<!--
 * @Author: Dee Dee
 * @Date: 2022-04-24 09:30:36
 * @LastEditors: Dee Dee
 * @LastEditTime: 2023-08-22 16:15:51
 * @FilePath: /培训认证系统20230822/src/views/vadmin/train/components/list.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>

  <el-table
    :data="list"
    align="center"
    :header-cell-style="{'text-align':'center'}"
    :cell-style="{'text-align':'center'}"
  >

    <el-table-column
      prop="name"
      label="知识点名称"
      width="200"
      :show-overflow-tooltip="true"
    >
    </el-table-column>

    <el-table-column
      prop="desc"
      label="知识点描述"
      min-width="400"
    >
    </el-table-column>
    <el-table-column
      label="操作"
      prop="score"
    >
      <template slot-scope="scope">
        <el-button
          type="primary"
          size="mini"
          @click="handlePre(scope.row)"
          :style="{backgroundColor:theme,borderColor:theme,fontWeight:'bold'}"
          v-hasPermi="['train:exam:query']"
        >学习</el-button>
      </template>
    </el-table-column>
  </el-table>

</template>
<script>
import { mapGetters, mapState } from "vuex";
import variables from "@/assets/styles/variables.scss";
import { listKnowledge } from "@/api/vadmin/course/course";
export default {
  name: "newKnowledge",
  data() {
    return {
      // 遮罩层
      loading: true,
      list: [],
      form: {},
      course: "",
      chapter: "",
    };
  },
  props: ["courseId", "chapterId"],
  watch: {
    courseId(val) {
      this.course = val;
    },
    chapterId(val) {
      this.chapter = val;
    },
  },
  computed: {
    ...mapState(["settings"]),
    variables() {
      return variables;
    },
    theme() {
      return this.$store.state.settings.theme;
    },
  },

  mounted() {},
  created() {
    this.getList();
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true;
      listKnowledge({ chapter: this.chapter, course: this.course }).then(
        (response) => {
          this.list = response.results;
          this.loading = false;
        }
      );
    },
    handlePre(row) {
      // console.log("学习");
      this.$emit("handleCon", "Content", row.id);
    },
  },
};
</script>
